<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div class="table">
        <el-table border stripe resizable :data="tableData" style="width: 100%">
          <el-table-column show-overflow-tooltip type="selection" width="50" />
          <el-table-column show-overflow-tooltip prop="name" label="单据编号" min-width="200" />
          <el-table-column show-overflow-tooltip prop="state" label="公司/网点" width="200" />
          <el-table-column show-overflow-tooltip prop="date" label="单据类型" width="120" />
          <el-table-column show-overflow-tooltip prop="city" label="仓库" width="150" />
          <el-table-column show-overflow-tooltip prop="state" label="制单日期" width="200" />
          <el-table-column show-overflow-tooltip prop="city" label="转单" width="100" />
          <el-table-column show-overflow-tooltip prop="state" label="制单人" width="120" />
          <el-table-column show-overflow-tooltip prop="address" label="制单时间" width="200" />
          <el-table-column show-overflow-tooltip prop="city" label="更新时间" width="200" />
          <el-table-column prop="state" label="单据状态" width="90">
            <template #default="scope"
              ><span
                :class="
                  scope.row.state == '待处理'
                    ? 'state1'
                    : scope.row.state == '处理中'
                    ? 'state2'
                    : scope.row.state == '已完成'
                    ? 'state3'
                    : 'state4'
                "
                >{{ scope.row.state }}</span
              ></template
            >
          </el-table-column>
          <el-table-column show-overflow-tooltip fixed="right" label="操作" width="60">
            <template #default>
              <div class="btns">
                <button class="btn-table detail">详细</button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <div class="btns">
          <button class="btn">批量转工单</button>
        </div>
        <div class="pagina"> <Pagination /></div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref } from 'vue'
  const tableData = [
    {
      date: '2023-06-26 11:56:35',
      name: '20230626295598983',
      state: '待处理',
      city: 'Los Angeles',
      address: '上海市-市辖区-虹口区-嘉兴路街道-666666',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom111',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom222',
      state: '已完成',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-01',
      name: 'Tom333',
      state: '已取消',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom444',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom555',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom666',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom777',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom888',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom999',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom000',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tomppp',
      state: '处理中',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]
</script>

<style scoped lang="scss">
  @import './index';
</style>
